<template>
  <div class="vue-box sbot sbot-fluid">
    <!-- ------- 内容部分 ------- -->
    <div class="c-panel">
      <el-form :inline="true">
        <sa-info name="ID" :value="m.id" br />
        <sa-info name="模型名" :value="m.name" br />
        <sa-info name="识别码" :value="m.code|| '无'" br />
        <sa-info name="模型来源" type="enum" :jv="dims.MOD_TYPE" :value="m.type" br />
        <sa-info name="APPID" :value="m.appId" br />
        <sa-info name="APIKEY" :value="m.apiKey" br />
        <sa-info name="APISECRET" :value="m.apiSecret" br />
        <sa-info name="请求方式" :value="m.method" br />
        <sa-info name="参数类型" :value="m.contentType" br />
        <sa-info name="扩展参数" br>
          <div class="extra-box">
            <span v-for="(item,index) in m.extraFields" :key="index">
              {{ item.note }}=> {{ item.key }}:{{ item.key }}
            </span>
          </div>
        </sa-info>
        <sa-info name="创建时间" :value="sa.forDate(m.createTime, 2)" br />
        <sa-info type="enum" name="启用状态" :jv="dims.YES_OR_NO" :value="m.status" br />
        <sa-info name="描述" :value="m.note" br />
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mod-info',
  props: {
    param: Object
  },
  data() {
    return {
      id: this.param.id,
      m: {},
      dims: sa.$sys.getCurd(),
    }
  },
  created: function () {
    this.getById()
  },
  methods: {
    // 获取详情
    getById() {
      sa.ajax('/mod/getById', {
        id: this.param.id
      }, function (res) {
        if (res.code == 200) {
          this.m = res.data;
          this.m.extraFields = JSON.parse(res.data.extraFields)
        }
      }.bind(this), {
        type: 'get'
      });
    }
  }
}
</script>

<style scoped>
.extra-box {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  width: calc(100% - 160px);
}
</style>
